<template>
  <div class="container">
    <div class="mainCon">
      <div class="cashDepositExplain">
        <ul class="explain clearfix">
          <div class="title">保证金管理模块</div>
          <li class="imgCon">
            <img src="../../../static/img/deposit/explainImg.png" alt="" />
          </li>
          <li class="textExplain">
            <div class="explainInfo">
              辖区内工程项目缴存农民工工资保证金后，劳动监察部门人员可登陆本系统记录保证金缴存情况，并根据实际情况记录保证金的支出、补缴、退回，达到工程项目保证金全流程管理的目的。
            </div>
            <div>
              <el-button
                class="commonBut saveBtn funComBut"
                @click="toCashDeposit"
                style="margin-right: 24px"
              >
                立即使用
              </el-button>
              <el-link type="primary" @click="downLoad">查看操作手册</el-link>
            </div>
            <div class="supplementaryInstruction">
              ※ 录入后后企业将可以在其关联项目项目详情页面查看到保证金的缴存情况
            </div>
          </li>
        </ul>
      </div>
      <div class="stepExplain">
        <div class="stepTitle">支持以下类型保证金的存档记录：</div>
        <ul class="step clearfix">
          <li>
            <img src="../../../static/img/deposit/zjcr.png" alt="" />
            <div>
              <div class="text zjcr">
                添加并维护保证金的缴纳、支出、补缴、返还记录，当项目需要补缴时系统将给出提示
              </div>
            </div>
          </li>
          <li>
            <img src="../../../static/img/deposit/yhbh.png" alt="" />
            <div>
              <div class="text">
                添加保单、保函、担保替换保证金的记录<br />
                系统将根据担保、保单的实际失效时间自动变更状态，<br />并给出提示
              </div>
            </div>
          </li>
          <li>
            <img src="../../../static/img/deposit/more.png" alt="" />
            <div>
              <div class="text">后续将提供更多<br />保证金缴存方式…</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="cutDeposit" v-if="userType == 'XM'">
        <p class="title">保证金减免/缓缴规则说明：</p>
        <p class="info">
          根据项目信用评价等级，对应不同减免比例或缓缴周期:{{ role }}
        </p>
        <div class="files" v-if="cutRuleFile.length">
          <p>保证金政策文件：</p>
          <el-row class="upLoadFile">
            <el-col
              :span="8"
              class="li"
              v-for="(item, index) in cutRuleFile"
              :key="index"
            >
              <el-link type="primary" :href="item.url" target="_blank"
                ><i class="icon iconfont iconfujian"></i
                >{{ item.name }}</el-link
              >
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cashDepositExplain',
  components: {},
  data() {
    return {
      src: '',
      index: 0,
      userType: '', //用户类型
      role: '',
      cutRuleFile: [],
    }
  },
  created() {
    this.userType = localStorage.getItem('loginType')
    if (this.userType === 'JC') {
      this.$store.commit(
        'set_active_index',
        '/home/cashDeposit/cashDepositListJC'
      )
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    } else {
      this.$store.commit(
        'set_active_index',
        '/home/cashDeposit/cashDepositList'
      )
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    }
    this.getRole()
    this.getCutRuleFile()
  },
  methods: {
    //区分企业和监察的引导页
    toCashDeposit() {
      if (this.userType === 'JC') {
        localStorage.setItem('isFirstUseCashDepositJC', true)
        this.$router.push('/home/cashDeposit/cashDepositListJC')
        return
      } else {
        localStorage.setItem('isFirstUseCashDeposit', true)
        this.$router.push('/home/cashDeposit/cashDepositList')
        return
      }
    },
    //下载操作手册
    downLoad() {
      //监察企业操作手册区分
      if (this.userType === 'JC') {
        this.downLoadFile('csDepositOperateMonitor')
      } else {
        this.downLoadFile('csDepositOperateCompany')
      }
    },
    downLoadFile(type) {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //获取减免配置规则
    getRole() {
      this.axios
        .post('api-d/depositpayconfig/expand/ruleTip', {
          areaId: this.$store.state.projectAreaId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.role = res.data.result.tip
          }
        })
    },
    //获取减免配置附件
    getCutRuleFile() {
      this.axios
        .post('api-d/depositpayconfig/expand/findFile', {
          areaId: this.$store.state.projectAreaId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.cutRuleFile = res.data.result
          }
        })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0px;
  overflow-y: auto;
  background: #fff;
  padding: 0;
  background: #ffffff;
  border: 2px solid #009588;
  border-radius: 4px;
  border-radius: 4px;
}
.cashDepositExplain {
  // height: 295px;
  background: #ecf5f6;
  border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0px 0px;
  .title {
    font-size: 24px;
    color: #333;
    margin-top: 36px;
    margin-bottom: 25px;
    // padding-left: 78px;
    text-align: center;
  }
  .imgCon {
    float: left;
    padding-left: 113px;
    //    padding-top: 25px;
    img {
      height: 160px;
      //    margin-bottom: 42px;
    }
  }

  .textExplain {
    float: left;
    padding-left: 21px;
    padding-right: 113px;
    // width: calc(100%-298px);
    width: calc(100% - 395px);

    .explainInfo {
      font-size: 16px;
      color: #333;
      margin-bottom: 18px;
      margin-top: 20px;
    }
    .supplementaryInstruction {
      font-size: 14px;
      color: #999999;
      margin-top: 32px;
      margin-bottom: 13px;
    }
  }
}

.stepExplain {
  padding: 34px 103px;
  .stepTitle {
    margin-bottom: 44px;
    color: #333;
    margin-bottom: 16px;
  }
  .step li {
    width: 20%;
    float: left;
    text-align: center;
    img {
      text-align: center;
      margin-bottom: 12px;
    }
    div {
      font-size: 14px;
      color: #666666;
      line-height: 20px;
      text-align: left;
      .text {
        margin: 0 auto;
      }
      .zjcr {
        max-width: 185px;
      }
    }
  }
  .step li:nth-of-type(2) {
    width: 60%;
    div {
      .text {
        display: flex;
        justify-content: center;
      }
    }
  }
  .step li:nth-of-type(3) {
    div {
      font-size: 12px;
      color: #999;
      line-height: 20px;
      .text {
        display: flex;
        justify-content: center;
      }
    }
  }
}

// 指引
.shade {
  position: fixed;
  background: #eee;
  top: 105px;
  left: 230px;
  right: 0;
  bottom: 0;
  z-index: 10000;

  background: #f5f7fa;
  div {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    img {
      width: 100%;
      //    height: 100%;
    }
  }
  // background-image: url(../../../static/img/deposit/oneStep.png);
  // // background-image: url("E:/Pictures/1d5ab7d344d74be6a8ec9adc.jpg");
  // background-repeat: no-repeat;
  // background-position: center top;
  // background-size: 100% 100%;
  // overflow: hidden;
}

@media screen and (max-width: 1280px) {
  .stepExplain {
    padding: 34px 60px;
  }
}
.cutDeposit {
  padding: 32px 60px;
  .title {
    font-weight: 500;
    font-size: 16px;
  }
  .info {
    line-height: 30px;
    margin-top: 15px;
    color: #999;
  }
}
.files {
  padding-left: 150px;
  position: relative;
  p {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 30px;
    color: #999;
  }
}
.upLoadFile {
  .li {
    line-height: 30px;
    display: flex;
    align-items: center;
    .el-link {
      margin-right: 15px;
      .iconfont {
        margin-right: 15px;
      }
    }
  }
}
</style>
